<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>饮食监测</title>
		<!-- 引入样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<link rel="stylesheet" href="../css/monitor.css" />

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="../../common/js/vue.min.js"></script>
		<script src="../../common/js/axios.min.js"></script>
		<script src="../../common/js/vue.global.prod.js?time=202209131555"></script>
		<!-- 引入 viewer 图片预览样式文件 -->
		<link href="../../common/css/viewer.css" rel="stylesheet" />
		<style>
			.van-cell::after {
				border: none;
			}
			.van-cell {
				margin-bottom: 0.37rem;
			}
			.van-list {
				background-color: rgba(0, 0, 0, 0.08);
			}
			.evalution_size {
				font-size: 0.66rem;
				color: rgba(0, 0, 0, 0.65);
			}
			.diet_type {
				font-size: 0.73rem;
				color: rgba(0, 0, 0, 0.85);
			}
			#dietIcon {
				height: 1.83rem;
				width: 1.83rem;
			}
			.diet_photo img {
				width: 3.14rem;
				height: 3.14rem;
			}
			.columnsValue {
				font-size: 0.8rem;
				color: rgba(0, 0, 0, 0.85);
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<van-nav-bar
				title="饮食监测"
				left-text="返回"
				left-arrow
				@click-left="onClickLeft"
				@click-right="onClickRight"
			>
				<template #right>
					<van-icon name="wap-home-o" size="18" />
				</template>
			</van-nav-bar>
			<div class="diet_header">
				<van-cell is-link @click="showPopup">
					<span class="columnsValue">{{columnsValue}}</span>
				</van-cell>
				<van-popup
					v-model:show="show"
					position="bottom"
					:style="{ height: '30%' }"
				>
					<van-picker
						show-toolbar
						title="时间选择"
						:columns="columns"
						:default-index="0"
						@cancel="show = false"
						@confirm="onConfirm"
					/>
				</van-popup>
			</div>
			<div class="diet_body">
				<van-list
					v-if="nothing==1"
					v-model="loading"
					:finished="finished"
					finished-text="没有更多了"
				>
					<van-cell center v-for="item in list" :key="item">
						<div class="">
							<img
								id="dietIcon"
								style="float: left"
								src="../img/bloodprofile/dinner.png"
								alt=""
							/>
							<div class="diet_content">
								<div class="diet_type">{{item.recordName}}</div>
								<span class="evalution_size">{{item.recordTime}}</span>
								<div
									class="diet_photo"
									style="border-bottom: 1px solid #dddddd"
								>
									<div v-viewer="{movable: false}">
										<img
											v-for="item1 in item.recordPhoto.split(',')"
											:src="item1"
											:key="index"
											style="margin-right: 1rem"
										/>
									</div>
									<div v-if="item.signinRecordSuggestListInfo.length >0">
										<span style="font-size: 0.72rem; color: rgba(0, 0, 0, 0.6)"
											>饮食得分：</span
										><span
											style="font-size: 0.66rem"
											:style="rateColor(avgScore(item.signinRecordSuggestListInfo)/item.signinRecordSuggestListInfo.length)"
											>{{(avgScore(item.signinRecordSuggestListInfo)/item.signinRecordSuggestListInfo.length).toFixed()}}</span
										>
									</div>
								</div>
								<div class="advise">
									<div style="font-size: 0.66rem; color: rgba(0, 0, 0, 0.6)">
										建议：
									</div>
									<div
										style="display: flex; align-items: center"
										@click="handleAdvise(item)"
									>
										<img
											src="../img/bloodprofile/suggtion.png"
											style="
												display: inline-block;
												width: 1.17rem;
												height: 1.17rem;
												margin-right: 0.37rem;
											"
										/>
										<div
											style="
												display: inline-block;
												font-size: 0.66rem;
												color: rgba(0, 0, 0, 0.65);
											"
										>
											新增建议
										</div>
									</div>
								</div>
								<div
									class="suggestion_content"
									v-if="item.signinRecordSuggestListInfo.length!=0"
								>
									<div
										class="advise_card"
										v-for="record in item.signinRecordSuggestListInfo"
									>
										<div style="display: flex; justify-content: space-between">
											<span style="color: #005bac; font-size: 0.66rem"
												>{{record.suggestDoctorName}}</span
											>
											<span
												style="color: rgba(0, 0, 0, 0.6); font-size: 0.62rem"
												>{{record.createTime}}</span
											>
										</div>
										<div
											style="
												color: rgba(0, 0, 0, 0.85);
												font-size: 0.66rem;
												line-height: 0.91rem;
											"
										>
											{{record.suggest}}
										</div>
										<div
											style="
												color: #e22e30;
												text-align: right;
												font-size: 0.66rem;
											"
											@click="handleDelete(record.dataId)"
										>
											删除
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- <div class="" style="margin-bottom: 0.5rem" v-if="item.lunchRecord">
							<img
								id="dietIcon"
								style="float: left"
								src="../img/bloodprofile/dinner.png"
								alt=""
							/>
							<div class="diet_content">
								<div class="diet_type">
									午餐饮食
									<span style="float: right; color: red"
										>{{item.lunchRecord?'':'未打卡'}}</span
									>
								</div>
								<span class="evalution_size"
									>{{item.lunchRecord?item.lunchRecord.recordTime:item.date}}</span
								>
								<div v-if="item.lunchRecord" class="diet_photo">
									<div v-viewer="{movable: false}">
										<img
											v-for="item1 in item.lunchRecord.recordPhoto"
											:src="item1"
											:key="index"
											style="margin-right: 1rem"
										/>
									</div>
								</div>
							</div>
						</div>
						<div
							class=""
							style="margin-bottom: 0.5rem"
							v-if="item.breakfastRecord"
						>
							<img
								id="dietIcon"
								style="float: left"
								src="../img/bloodprofile/dinner.png"
								alt=""
							/>
							<div class="diet_content">
								<div class="diet_type">
									早餐饮食
									<span style="float: right; color: red"
										>{{item.breakfastRecord?'':'未打卡'}}</span
									>
								</div>
								<span class="evalution_size"
									>{{item.breakfastRecord?item.breakfastRecord.recordTime:item.date}}</span
								>
								<div v-if="item.breakfastRecord" class="diet_photo">
									<div v-viewer="{movable: false}">
										<img
											v-for="item1 in item.breakfastRecord.recordPhoto"
											:src="item1"
											:key="index"
											style="margin-right: 1rem"
										/>
									</div>
								</div>
							</div>
						</div> -->
					</van-cell>
					<van-pagination
						v-model="currentPage"
						@click="pageChange"
						:page-count="this.totalPage"
						mode="simple"
					/>
				</van-list>
				<div v-if="nothing==2" class="none_info">
					<img src="../img/bloodprofile/none.png" />
					<p style="font-size: 12px">— 暂无数据 —</p>
				</div>
			</div>
		</div>
	</body>
	<!-- viewer 图片预览 -->
	<script src="../../common/js/vant.min.js"></script>
	<script src="../../common/js/viewer.js"></script>
	<script src="../../common/js/index.umd.js"></script>
	<script src="../../base.js"></script>
	<script src="../../common/js/url.min.js"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script> -->
	<script type="module">
		// var vConsole = new VConsole()
		import {
			getAction,
			postAction,
			deleteAction,
			spliceUrl,
			getUrl,
		} from '../../common/js/api/vue3-axios-utils.js'

		const app = Vue.createApp({
			data() {
				return {
					totalPage: 0,
					currentPage: 1,
					url: {
						getDietList: '/101/02/1010202',
					},
					value: '',
					show: false,
					columns: ['最近两周', '最近一个月', '最近三个月', '全部'],
					columnsValue: '最近两周',
					nothing: 1,
					list: [],
					period: 2,
					loading: false,
					finished: false,
				}
			},
			created() {
				this.pid = url('?pid')
				this.getDietList()
			},
			methods: {
				pageChange() {
					this.getDietList()
				},
				showPopup() {
					this.show = true
				},
				handleAdvise(item) {
					if (!localStorage.did) {
						this.$toast.fail('不是医生不能新增建议！')
						return
					}
					window.location.href =
						'./addAdvise.html?userid=' + localStorage.pid + '&id=' + item.id
				},
				rateColor(text) {
					if (text > 1 && text < 5) {
						return 'color:#D9321F'
					} else if (text > 4 && text < 8) {
						return 'color:#D9A71F'
					} else if (text > 7 && text < 11) {
						return 'color:#1FD944'
					} else {
						return ''
					}
				},
				avgScore(item) {
					console.log(item, 111)
					if (item.length == 1) {
						return item[0].score
					} else if (item.length > 1) {
						const sum = item.map(v => {
							return v.score
						})
						return sum.reduce((a, b) => a + b)
					} else {
						return ''
					}
				},
				onConfirm(value, index) {
					console.log(value, index)
					this.columnsValue = value
					this.show = false
					if (index == 0) {
						this.period = 2
					}
					if (index == 1) {
						this.period = 3
					}
					if (index == 2) {
						this.period = 5
					}
					if (index == 3) {
						this.period = 0
					}
					this.getDietList()
				},
				async getDietList() {
					let params = {
						// 患者 ID 从本地存储空间的 pid 获得
						patientId: this.pid || localStorage.pid,
						// patientId: this.pid,
						period: this.period,
						//默认取一页10条数据
						page: this.currentPage,
						type: 3,
						pageSize: 10,
					}
					let url = getUrl() + this.url.getDietList
					const res = await postAction(url, params)
					if (res.data.success) {
						//判断有无打卡记录 无打卡记录显示无内容页面
						if (res.data.result.count == 0) {
							this.nothing = 2
						} else {
							this.nothing = 1
							this.totalPage = res.data.result.totalPage
							const list = []
							res.data.result.recordList.forEach(v => {
								v.extraDinnerLunchRecord &&
									list.push({
										...v.extraDinnerLunchRecord,
										recordName: '晚餐饮食(加)',
										signinRecordSuggestListInfo:
											v.extraDinnerLunchRecord.signinRecordSuggestListInfo.map(
												n => {
													return {
														...n,
														score: n.score
															.split(',')
															.reduce((a, b) => Number(a) + Number(b)),
													}
												}
											),
									})
								v.dinnerRecord &&
									list.push({
										...v.dinnerRecord,
										recordName: '晚餐饮食',
										signinRecordSuggestListInfo:
											v.dinnerRecord.signinRecordSuggestListInfo.map(n => {
												return {
													...n,
													score: n.score
														.split(',')
														.reduce((a, b) => Number(a) + Number(b)),
												}
											}),
									})
								v.extraLunchRecord &&
									list.push({
										...v.extraLunchRecord,
										recordName: '午餐饮食(加)',
										signinRecordSuggestListInfo:
											v.extraLunchRecord.signinRecordSuggestListInfo.map(n => {
												return {
													...n,
													score: n.score
														.split(',')
														.reduce((a, b) => Number(a) + Number(b)),
												}
											}),
									})
								v.lunchRecord &&
									list.push({
										...v.lunchRecord,
										recordName: '午餐饮食',
										signinRecordSuggestListInfo:
											v.lunchRecord.signinRecordSuggestListInfo.map(n => {
												return {
													...n,
													score: n.score
														.split(',')
														.reduce((a, b) => Number(a) + Number(b)),
												}
											}),
									})
								v.extraBreakfast &&
									list.push({
										...v.extraBreakfast,
										recordName: '早餐饮食(加)',
										signinRecordSuggestListInfo:
											v.extraBreakfast.signinRecordSuggestListInfo.map(n => {
												return {
													...n,
													score: n.score
														.split(',')
														.reduce((a, b) => Number(a) + Number(b)),
												}
											}),
									})
								v.breakfastRecord &&
									list.push({
										...v.breakfastRecord,
										recordName: '早餐饮食',
										signinRecordSuggestListInfo:
											v.breakfastRecord.signinRecordSuggestListInfo.map(n => {
												return {
													...n,
													score: n.score
														.split(',')
														.reduce((a, b) => Number(a) + Number(b)),
												}
											}),
									})
							})
							this.list = list
							JSON.parse(JSON.stringify(this.list))
							console.log(this.list)

							//处理接口返回多张图片
							for (let index = 0; index < res.data.result.count; index++) {
								if (res.data.result.recordList[index].breakfastRecord) {
									res.data.result.recordList[
										index
									].breakfastRecord.recordPhoto =
										res.data.result.recordList[
											index
										].breakfastRecord.recordPhoto.split(',')
								}
								if (res.data.result.recordList[index].lunchRecord) {
									res.data.result.recordList[index].lunchRecord.recordPhoto =
										res.data.result.recordList[
											index
										].lunchRecord.recordPhoto.split(',')
								}
								if (res.data.result.recordList[index].dinnerRecord) {
									res.data.result.recordList[index].dinnerRecord.recordPhoto =
										res.data.result.recordList[
											index
										].dinnerRecord.recordPhoto.split(',')
								}
							}
						}
					}
				},
				handleDelete(id) {
					deleteAction(spliceUrl('/signin/suggest/delete'), { id: id }).then(
						res => {
							res = res.data
							if (res.success) {
								this.$toast.success('删除成功')
								this.getDietList()
							} else {
								this.$toast.fail(res.message)
							}
						}
					)
				},
				onClickLeft() {
					window.location.href = '../dailyIndex.html?userid=' + localStorage.pid
				},
				onClickRight() {
					window.location.href = '../index.html?userid=' + localStorage.pid
				},
			},
		})
		app.use(vant)

		app.use(vant.Lazyload)
		app.use(VueViewer.default)

		app.mount('#app')
	</script>
</html>
